﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Drag and Drop Demo</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3");
        google.load("jqueryui", "1.7");
        google.setOnLoadCallback(function () {
            $('#main').css('-moz-user-select', 'none');
            $('#main').get(0).onselectstart = function () { return false; };

            $(".block").draggable({ helper: 'clone' });
            // Choosed Question Type
            $("#choosedQuestionType").droppable({
                accept: ".block",
                activeClass: 'droppable-active',
                hoverClass: 'droppable-hover',
                drop: function (ev, ui) {
                    editMode();
                }

            });
        });

        function editMode() {
            //The "choosed question type" box changes to edit mode
            $("#choosedQuestionType").css("background-color", get_random_color())
        }

        function get_random_color() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.round(Math.random() * 15)];
            }
            return color;
        }
    </script>
    <style type="text/css">
        h2
        {
            color: #79B933;
            border-bottom: 2px solid #f6f6f6;
            margin: 5px;
            text-align: center;
        }
        #main
        {
            margin: 0 auto;
            width: 1024px;
            height: 560px;
            text-align: center;
        }
        #choosedQuestionType
        {
            float: left;
            width: 600px;
            min-height: 560px;
            height: auto !important; /* fix for IE6 */
            height: 560px;
            background-color: #dedede;
        }
        #questionType
        {
            float: right;
            width: 336px;
            min-height: 560px;
            height: auto !important; /* fix for IE6 */
            height: 560px;
            background-color: #dedede;
            margin-left: 76px;
        }
        .block
        {
            width: 200px;
            height: 100px;
            background-color: #ff9;
            margin: 5px auto;
            border: 1px solid #999;
            line-height: 40px;
            font-size: 13px;
            text-align: center;
            cursor: move;
        }
        .style2
        {
            width: 200px;
            height: 100px;
        }
        .style3
        {
            width: 200px;
            height: 106px;
        }
        #Button1
        {
            width: 256px;
            height: 43px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="choosedQuestionType" style="border-style: double">
            <h2>
                &nbsp;</h2>
            <div style="height: 325px">
               
                The editor preview page</div>
            <div style="height: 150px">
                The editor setting page
        </div>
        <div style="height: 44px; width: 598px">
            <input id="Button1" 
                style="background-position: center center; background-image: url('Source/submit.jpg'); background-repeat: no-repeat; background-attachment: inherit;" 
                type="button" /></div>
        </div>
        <div id="questionType">
            <h2>
                Question Type</h2>
            <div class="block" id="multipleChoiceOne">
               
                <img alt="" class="style2" src="Source/Multiple%20Choices.png" /></div>
            <div class="block" id="agreementChoice">
                
                <img alt="" class="style2" src="Source/Rating%20Scare.png" /></div>
            <div class="block" id="comment">
                
                <img alt="" class="style2" src="Source/Text.png" /></div>
            <div class="block" id="matrix">

                <img alt="" class="style3" src="Source/Matrix.png" /></div>
        </div>
    </div>
</body>
</html>
